<template>
  <div class="restaurant-details-page">
    <!-- 餐厅信息 -->
    <el-card class="restaurant-info">
      <img :src="restaurant.image" alt="餐厅图片" class="restaurant-banner" />
      <h2>{{ restaurant.name }}</h2>
      <p>{{ restaurant.description }}</p>
      <p>地址：{{ restaurant.address }}</p>
    </el-card>

    <!-- 菜品列表 -->
    <div class="menu-section">
      <h3>菜品列表</h3>
      <el-row :gutter="20">
        <el-col v-for="dish in restaurant.menu" :key="dish.id" :span="8">
          <el-card>
            <img :src="dish.image" alt="菜品图片" class="dish-image" />
            <h4>{{ dish.name }}</h4>
            <p>价格：¥{{ dish.price }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户评价 -->
    <div class="reviews-section">
      <h3>用户评分与评价</h3>
      <el-row :gutter="20">
        <el-col v-for="review in restaurant.reviews" :key="review.id" :span="12">
          <el-card>
            <div class="review-content">
              <img :src="review.avatar" alt="用户头像" class="user-avatar" />
              <div>
                <h4>{{ review.author }}</h4>
                <p>{{ review.content }}</p>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      restaurant: {
        name: '美味餐厅A',
        image: '/images/restaurant-b.jpg',
        description: '这是一家提供地道美食的特色餐厅。',
        address: '某市某路123号',
        menu: [
          { id: 1, name: '红烧肉', price: 38, image: '/images/dish1.jpg' },
          { id: 2, name: '宫保鸡丁', price: 28, image: '/images/dish2.jpg' },
        ],
        reviews: [
          { id: 1, author: '用户A', avatar: '/images/avatar-a.jpg', content: '非常美味，推荐！' },
          { id: 2, author: '用户B', avatar: '/images/avatar-b.jpg', content: '服务很好，菜品也不错！' },
        ],
      },
    };
  },
};
</script>

<style scoped>
.restaurant-banner {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.dish-image {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.review-content {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
